<template>
	<div class="dan-tab1">
		<ul>
			<li v-for="item in list" :key="item.id">
				<article>
					<img :src="item.imgURL" >
					<p>{{item.word}}</p>
					<label>{{item.txt}}</label>
				</article>
			</li>
		</ul>
		<div class="footbox">
		<!-- 	<p>戛纳四</p>
			<p>桂林</p>
			<p>桂林2</p> -->
			<ul>
				<li>格纳斯
				<h3>冬日仙境</h3>
				</li>
				<li>桂林</li>
				<li>牛背山
				<h3>冬日仙境</h3>
				</li>
			</ul>
		</div>
		<div class="footbox2">
			<ul>
				<li>长白山</li>
				<li>亚龙湾</li>
				<li>老君山</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'DanjiTab1',
		data(){
			return{
				list:[
					{id:1,imgURL:'images/1_1.jpg',word:'南京',txt:'缤纷秋色'},
					{id:2,imgURL:'images/1_2.jpg',word:'塔川',txt:'皖南秋色'},
					{id:3,imgURL:'images/1_3.jpg',word:'无量山',txt:'冬樱花季'},
				
				],	
			}
		},
	}
</script>

<style scoped>
	.dan-tab1{
		width: 100%;
		overflow: hidden;
	}
	.dan-tab1 ul{
		width: 100%;
		height: 3rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.dan-tab1 ul li{
		width: 32.5%;
		height: 3rem;
		text-align: center;
	}
	/* 最左边的图片 */
	.dan-tab1 ul li:first-child img{
		width: 100%;
		height: 3rem;
		border-radius: 0.2rem 0 0 0.2rem;
		background-size: 100% 100%;
	}
	.dan-tab1 ul li img{
		width: 100%;
		height: 3rem;
		background-size: 100% 100%;
	}
	/* 最右边的图片 */
	.dan-tab1 ul li:last-child img{
		width: 100%;
		height: 3rem;
		border-radius: 0 0.2rem 0.2rem 0;
		background-size: 100% 100%;
	}
	.dan-tab1 ul li article{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.dan-tab1 ul li p{
		position: relative;
		bottom: 1.2rem;
		color: white;
		font-size: 0.5rem;
		font-weight: bold;
	}
	.dan-tab1 ul li article label{
		display: block;
		position: relative;
		bottom: 1rem;
		font-size: 0.3rem;
		color: #939492;
	}
	.dan-tab1 .footbox,.footbox2{
		width: 100%;
		height: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.dan-tab1 .footbox li{
		width: 30%;
		height: 1.13rem;
		font-size: 0.39rem;
		line-height: 1.13rem;
		text-align: center;
		color: #1e1e1e;
		font-weight: bold;
		border-radius: 0.1rem;
		border: 1px solid  #dedfde;
	}
	.dan-tab1 .footbox2 li{
		width: 30%;
		height: 1.13rem;
		font-size: 0.39rem;
		line-height: 1.13rem;
		color: #1e1e1e;
		font-weight: bold;
		border-radius: 0.2rem;
		border: 1px solid  #dedfde;
	}
	.dan-tab1 .footbox li{
		position: relative;
	}
	.dan-tab1 .footbox li h3{
		position: absolute;
		top: 0;
		height: 0.37rem;
		line-height: 0.37rem;
		margin-left: -0.02rem;
		width:55%;
		font-weight: normal;
		background-color: #ffdd3f;
		font-size: 0.1rem;
		line-height: 0.27rem;
		border-radius: 0.2rem 0 0.2rem 0;
	}
</style>
